<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/request.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrapAll {
            overflow: hidden;
            margin: 0 auto;
            margin-top: 100px;
            width: 1140px;
        }

        .wrapBox {
            width: 400px;
            height: 400px;
            background-color: grey;
            position: relative;
            float: left;
            border: 1px dashed #000;
        }

        .shadow {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }

        .wrapBox img {
            width: 100%;
            height: 100%;
        }

        .wrapImgBox {
            width: 300px;
            height: 300px;
            /* background-color: rgba(125, 255, 255, 0.4); */
            float: left;
            position: relative;
            overflow: hidden;
            display: none;

        }

        .wrapImgBox img {
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }

        .detailBox {
            overflow: hidden;
            background-color: pink;
            height: 400px;
        }

        .detail {
            margin-left: 100px;
        }

        .detail>* {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        你好,<a href="./login.html">请登录</a>
    </div>
    <div class="wrapAll">
        <div class="wrapBox">
            <div class="shadow"></div>
            <img src="../images/menma.jpg" alt="" class="smallImg">
        </div>

        <!-- <div class="wrapImgBox">
            <img src="../images/menma.jpg" alt="" class="bigImg">
        </div> -->
        <div class="detailBox">
            <!-- <div class="detail">
                <h3 class="goodsName">
                    柒牌 SEVEN 短袖POLO衫2020年夏季休闲男士纯色高山棉弹力轻薄透气翻领T恤118T70480 藏青175
                </h3>
                <div class="goodsPrice">
                    秒 杀 价:￥99.00
                </div>
                <div class="goodsNumBox">
                    <span>-</span>
                    <input type="number" min="1" max="100">
                    <span>+</span>
                </div>
                <div class="addCarBox">
                    <button class="addToCar">加入购物车</button>
                </div>
            </div> -->
        </div>
    </div>
</body>

<script>

    if (getCookie("logUser")) {
        box.textContent = `欢迎您,${getCookie("logUser")}`;
    }

    var search = location.search;
    if (search) {
        var gid = search.split("=")[1];
        console.log(gid);
    } else {
        location.href = "./goodsList.html";
    }


    searchGoodsListByGoodsId({ gid }).then(result => {
        console.log(result);
        var { goodsName, goodsPrice, goodsImgList } = result;
        var html = `<div class="detail">
                <h3 class="goodsName">
                    ${goodsName}
                </h3>
                <div class="goodsPrice">
                    秒 杀 价: ${goodsPrice}
                </div>
                <div class="goodsNumBox">
                    <span>-</span>
                    <input type="number" min="1" value="1" max="100">
                    <span>+</span>
                </div>
                <div class="addCarBox">
                    <button class="addToCar">加入购物车</button>
                </div>
            </div>`

        $(".detailBox").html(html);
        $(".wrapBox img").attr("src", goodsImgList[0].replace("n5", "n1"));



    }).catch(err => {
        console.log(err);
    })


    $(document).on("click", ".addToCar", function () {
        console.log("准备加入购物车");

        // 肯定需要和数据库联动 => 怎么联动?
        // 谁 ?   买了什么东西?   买了多少件
        // 谁 ?            当前登录的用户(用户名 /id)
        // 买了什么东西?    商品id
        // 买了多少件?      商品的数量

        // 谁?  可能登陆了  也可能没有登录?  => 登录验证
        // 如果已经登录 正常操作
        // 如果没有登录  跳转到登录页 登录之后再操作

        var logUser = getCookie("logUser");
        if (logUser) {   //用户已登录
            var buyNum = $(".goodsNumBox input").val();

            addToShoppingCar({
                user: logUser,
                goodsId: gid,
                buyNum,
            }).then(result => {
                console.log(result);
                if (result.status) {
                    if (confirm("商品加入成功,是否进入购物车?")) {
                        location.href = "shoppingCar.html";
                    }
                } else {
                    alert(result.msg);
                }

            }).catch(err => {
                console.log(err);
            })


        } else { // 用户还未登录  => 跳转登录页 (并把当前页的href作为参数保存)
            var returnUrl = encodeURIComponent(location.href);
            location.href = "./login.html?returnUrl=" + returnUrl;
        }
    })






</script>

</html>